<template>
  <div class="internal">
    <navbar :text="$route.params.text"></navbar>
    <div class="notice">
      <div class="cc">
        <div class="illustrate">
          <nav v-for="(item, index) in list" :key="index">
            <p class="icon-img"><img :src="icon" alt="" /></p>
            <p class="ordinance">{{ item }}</p>
          </nav>
        </div>
        <div class="agreement">
          <input type="checkbox" v-model="checked" />
          <label for="">我已阅读并同意<span>《挂号须知》</span></label>
        </div>
      </div>
    </div>
    <div class="footer">
      <button @click="btnAction()">确认</button>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import navbar from "../../../components/navbar.vue";
export default {
  components: {
    navbar,
  },
  data() {
    return {
      checked: false,
      list: [
        "挂号成功以医院成功挂号记录为准。参考APP中挂号状态（查看方式：【我】-【挂号记录】-【状态：已挂号】）",
        "号源更新时间：每日下午16点",
        "普通门诊医事服务费：知名专家100元，主任医师80元，副主任医师60元，普通门诊50元",
        "普通门诊医事服务费：知名专家100元，主任医师80元，副主任医师60元，普通门诊50元",
        "支付时效：预约成功后，请在5分钟内完成挂号支付操作，超时系统将自动取消本次预约",
        "预约挂号成功后48小时内同时要在就诊日前一天中午12：00前可在手机APP上退号；如超过手机APP最迟退号时间，且未到就诊日期的，请携带患者有效证件到医院收费窗口退号",
        "若手机退号时间超过预约就诊日期的工作开始时间，手机APP和医院收费窗口一律不退号",
      ],
      icon: "https://cdn7.axureshop.com/demo/1763441/images/%E6%8C%82%E5%8F%B7%E9%A1%BB%E7%9F%A5/u297.png",
    };
  },
  methods: {
    btnAction() {
      if (this.checked) {
        this.$router.push({
          name: "SelectDepartment",
          params: { text: "选择科室" },
        });
      } else {
        Toast("请先勾选挂号须知");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}
li {
  list-style-image: url("https://cdn7.axureshop.com/demo/1763441/images/%E6%8C%82%E5%8F%B7%E9%A1%BB%E7%9F%A5/u297.png");
}
// 内容
.notice {
  position: absolute;
  top: 46px;
  left: 0;
  z-index: 1;
  border-top: vw(1) solid rgba(235, 235, 235, 1);
  overflow: auto;
  height: 100%;
  &::-webkit-scrollbar {
    display: none;
  }
  .cc {
    overflow: auto;
    padding-bottom: vw(120);
    box-sizing: border-box;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .illustrate {
    background-color: #fff;
    padding-top: vw(10);
    box-sizing: border-box;
    nav {
      display: flex;
      padding-left: vw(15);
      padding-bottom: vw(15);
      padding-right: vw(20);
      box-sizing: border-box;

      .icon-img {
        width: vw(10);
        height: vw(10);
        margin-top: vw(7);
        img {
          height: 100%;
          color: #333333;
          text-align: center;
          line-height: normal;
          font-weight: 400;
        }
      }
      .ordinance {
        font-family: "微软雅黑";
        font-weight: 400;
        font-style: normal;
        line-height: vw(28);
        font-size: vw(14);
        margin-left: vw(10);
        color: #333333;
      }
    }
  }
  //预约挂号选项
  .agreement {
    padding-top: vw(20);
    padding-left: vw(30);
    font-family: MicrosoftYaHei, 微软雅黑;
    font-weight: 400;
    font-style: normal;
    font-size: vw(14);
    color: #333333;
    label {
      color: #1e1e1e;
      margin-right: vw(2);
      span {
        color: #2ec7c9;
        font-size: vw(12);
      }
    }
  }
}

// 页脚
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: vw(56);
  z-index: 1;
  background-color: #fff;
  text-align: center;
  button {
    margin-top: vw(7);
    background-color: #2ec7c9;
    color: #fff;
    height: vw(44);
    width: vw(303);
    border: none;
    border-radius: vw(3);
    font-family: "MicrosoftYaHei", "微软雅黑 Regular", "微软雅黑";
    font-weight: 400;
    font-style: normal;
    font-size: vw(16);
  }
}
</style>
